<template>
  <div class="navigation-menu">
    <!-- 常用视图 -->
    <div class="menu-section">
      <div class="section-title">常用</div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'inbox' }"
        @click="setActiveItem('inbox')"
      >
        <div
          class="menu-icon"
          :class="{ 'active-icon': state.currentView === 'inbox' }"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <polyline
              points="22,12 18,12 15,21 9,21 6,12 2,12"
              stroke="currentColor"
              stroke-width="2"
            />
            <path
              d="M5.45,5.11L2,12v6a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V12l-3.45-6.89A2,2,0,0,0,16.76,4H7.24A2,2,0,0,0,5.45,5.11Z"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">未分类</span>
        <span class="task-count">{{ taskCounts.inbox }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'today' }"
        @click="setActiveItem('today')"
      >
        <div
          class="menu-icon"
          :class="{ 'active-icon': state.currentView === 'today' }"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <!-- 日历框架 -->
            <rect
              x="3"
              y="4"
              width="18"
              height="18"
              rx="2"
              ry="2"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 日历顶部 -->
            <line
              x1="3"
              y1="10"
              x2="21"
              y2="10"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 日历环扣 -->
            <line
              x1="8"
              y1="2"
              x2="8"
              y2="6"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="16"
              y1="2"
              x2="16"
              y2="6"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 今天标记 - 实心圆点 -->
            <circle
              cx="12"
              cy="15"
              r="2"
              fill="currentColor"
            />
          </svg>
        </div>
        <span class="menu-text">今天</span>
        <span class="task-count">{{ taskCounts.today }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'tomorrow' }"
        @click="setActiveItem('tomorrow')"
      >
        <div class="menu-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <!-- 日历框架 -->
            <rect
              x="3"
              y="4"
              width="18"
              height="18"
              rx="2"
              ry="2"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 日历顶部 -->
            <line
              x1="3"
              y1="10"
              x2="21"
              y2="10"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 日历环扣 -->
            <line
              x1="8"
              y1="2"
              x2="8"
              y2="6"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="16"
              y1="2"
              x2="16"
              y2="6"
              stroke="currentColor"
              stroke-width="2"
            />
            <!-- 明天标记 - 空心圆圈 -->
            <circle
              cx="12"
              cy="15"
              r="2"
              stroke="currentColor"
              stroke-width="1.5"
              fill="none"
            />
            <!-- 向前箭头表示明天 -->
            <path
              d="M14 13l2 2-2 2"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <span class="menu-text">明天</span>
        <span class="task-count">{{ taskCounts.tomorrow }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'thisweek' }"
        @click="setActiveItem('thisweek')"
      >
        <div
          class="menu-icon"
          :class="{ 'active-icon': state.currentView === 'thisweek' }"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <rect
              x="3"
              y="4"
              width="18"
              height="18"
              rx="2"
              ry="2"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="3"
              y1="10"
              x2="21"
              y2="10"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">本周</span>
        <span class="task-count">{{ taskCounts.thisweek }}</span>
      </div>
      
      <div
        class="menu-item"
        :class="{ active: state.currentView === 'completed' }"
        @click="setActiveItem('completed')"
      >
        <div class="menu-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
              stroke="currentColor"
              stroke-width="2"
            />
            <polyline
              points="22,4 12,14.01 9,11.01"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">已完成</span>
        <span class="task-count">{{ taskCounts.completed }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'abandoned' }"
        @click="setActiveItem('abandoned')"
      >
        <div class="menu-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M18 6L6 18M6 6l12 12"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <span class="menu-text">已放弃</span>
        <span class="task-count">{{ taskCounts.abandoned }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'planned' }"
        @click="setActiveItem('planned')"
      >
        <div class="menu-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">所有任务</span>
        <span class="task-count">{{ taskCounts.planned }}</span>
      </div>
    </div>
    
    <!-- 优先级分类 -->
    <div class="menu-section">
      <div class="section-title">优先级</div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'high' }"
        @click="setActiveItem('high')"
      >
        <div class="menu-icon high-priority">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"
              stroke="currentColor"
              stroke-width="2"
              fill="currentColor"
            />
          </svg>
        </div>
        <span class="menu-text">高优先级</span>
        <span class="task-count">{{ taskCounts.high }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'medium' }"
        @click="setActiveItem('medium')"
      >
        <div class="menu-icon medium-priority">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <circle
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="12"
              y1="8"
              x2="12"
              y2="12"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="12"
              y1="16"
              x2="12.01"
              y2="16"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">中优先级</span>
        <span class="task-count">{{ taskCounts.medium }}</span>
      </div>

      <div
        class="menu-item"
        :class="{ active: state.currentView === 'low' }"
        @click="setActiveItem('low')"
      >
        <div class="menu-icon low-priority">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M7 13l3 3 7-7"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <circle
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">低优先级</span>
        <span class="task-count">{{ taskCounts.low }}</span>
      </div>
    </div>    

    <!-- 自定义清单 -->
    <div class="menu-section" v-if="customLists.length > 0">
      <div class="section-title">清单</div>
      <div class="menu-box">
        <div
          v-for="list in customLists"
          :key="list.id"
          class="menu-item list-item"
          :class="{ active: state.currentListId === list.id }"
          @click="setCurrentList(list.id)"
        >
          <div class="menu-icon list-avatar" :style="{ backgroundColor: list.color, color: getTextColor(list.color) }">
            <span class="list-initial">{{ getListInitial(list.name) }}</span>
          </div>
          <span class="menu-text" :title="list.name">{{ list.name }}</span>
          <div class="list-actions" @click.stop>
            <button class="action-btn" @click="editList(list)" title="编辑清单">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                <path
                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
            </button>
            <button
              class="action-btn delete-btn"
              @click="deleteListConfirm(list)"
              title="删除清单"
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                <polyline
                  points="3,6 5,6 21,6"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M19,6v14a2,2 0 0,1-2,2H7a2,2 0 0,1-2-2V6m3,0V4a2,2 0 0,1,2-2h4a2,2 0 0,1,2,2v2"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
            </button>
          </div>
          <span class="task-count">{{
            state.tasks.filter((t) => t.listId === list.id && !t.completed && !t.deleted_at)
              .length
          }}</span>
        </div>
      </div>
    </div>

    <!-- 新增清单 -->
    <div class="menu-section">
      <div class="add-list-btn" @click="addNewList">
        <div class="menu-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <line
              x1="12"
              y1="5"
              x2="12"
              y2="19"
              stroke="currentColor"
              stroke-width="2"
            />
            <line
              x1="5"
              y1="12"
              x2="19"
              y2="12"
              stroke="currentColor"
              stroke-width="2"
            />
          </svg>
        </div>
        <span class="menu-text">创建清单</span>
      </div>
    </div>

    <!-- 创建清单对话框 -->
    <div
      v-if="showCreateListDialog"
      class="dialog-overlay"
      @click="cancelCreateList"
    >
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>创建新清单</h3>
          <button class="close-btn" @click="cancelCreateList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <line
                x1="18"
                y1="6"
                x2="6"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
              <line
                x1="6"
                y1="6"
                x2="18"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
            </svg>
          </button>
        </div>
        <div class="dialog-body">
          <div class="form-group">
            <label>清单名称</label>
            <input
              v-model="newListName"
              type="text"
              placeholder="输入清单名称"
              @keyup.enter="confirmCreateList"
              ref="listNameInput"
            />
          </div>
          <div class="form-group">
            <label>颜色</label>
            <div class="color-options">
              <div
                v-for="color in colorOptions"
                :key="color"
                class="color-option"
                :class="{ active: newListColor === color }"
                :style="{ backgroundColor: color }"
                @click="newListColor = color"
              ></div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="btn btn-secondary" @click="cancelCreateList">
            取消
          </button>
          <button
            class="btn btn-primary"
            @click="confirmCreateList"
            :disabled="!newListName.trim()"
          >
            创建
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑清单对话框 -->
    <div
      v-if="showEditListDialog"
      class="dialog-overlay"
      @click="cancelEditList"
    >
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>编辑清单</h3>
          <button class="close-btn" @click="cancelEditList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <line
                x1="18"
                y1="6"
                x2="6"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
              <line
                x1="6"
                y1="6"
                x2="18"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
            </svg>
          </button>
        </div>
        <div class="dialog-body">
          <div class="form-group">
            <label>清单名称</label>
            <input
              v-model="editListName"
              type="text"
              placeholder="输入清单名称"
              @keyup.enter="confirmEditList"
            />
          </div>
          <div class="form-group">
            <label>颜色</label>
            <div class="color-options">
              <div
                v-for="color in colorOptions"
                :key="color"
                class="color-option"
                :class="{ active: editListColor === color }"
                :style="{ backgroundColor: color }"
                @click="editListColor = color"
              ></div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="btn btn-secondary" @click="cancelEditList">
            取消
          </button>
          <button
            class="btn btn-primary"
            @click="confirmEditList"
            :disabled="!editListName.trim()"
          >
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 删除清单确认对话框 -->
    <div
      v-if="showDeleteConfirmDialog"
      class="dialog-overlay"
      @click="cancelDeleteList"
    >
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>删除清单</h3>
          <button class="close-btn" @click="cancelDeleteList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <line
                x1="18"
                y1="6"
                x2="6"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
              <line
                x1="6"
                y1="6"
                x2="18"
                y2="18"
                stroke="currentColor"
                stroke-width="2"
              />
            </svg>
          </button>
        </div>
        <div class="dialog-body">
          <p>确定要删除清单 "{{ deleteListData?.name }}" 吗？</p>
          <p class="warning-text">
            清单中的所有任务也将被删除，此操作不可撤销。
          </p>
        </div>
        <div class="dialog-footer">
          <button class="btn btn-secondary" @click="cancelDeleteList">
            取消
          </button>
          <button class="btn btn-danger" @click="confirmDeleteList">
            删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useTodoStore } from "@/stores/todoStore";

const router = useRouter();
const todoStore = useTodoStore();
const {
  state,
  taskCounts,
  setCurrentView,
  createList,
  updateList,
  deleteList,
  setCurrentList,
  customLists,
} = todoStore;
const { state: todoState } = useTodoStore();

// 创建清单相关
const showCreateListDialog = ref(false);
const newListName = ref("");
const newListColor = ref("#6366f1");

// 编辑清单相关
const showEditListDialog = ref(false);
const editListData = ref(null);
const editListName = ref("");
const editListColor = ref("#6366f1");

// 删除清单相关
const showDeleteConfirmDialog = ref(false);
const deleteListData = ref(null);

const setActiveItem = (item) => {
  setCurrentView(item);
  // 注意：不要覆盖刚设置的currentView，这里应该设置的是显示模式而不是视图
  // todoState.currentView = 'list' // 这行代码导致了视图切换失效
};

// 创建清单
const addNewList = () => {
  showCreateListDialog.value = true;
  newListName.value = "";
  newListColor.value = "#6366f1";
};

const confirmCreateList = () => {
  if (newListName.value.trim()) {
    createList(newListName.value.trim(), newListColor.value);
    showCreateListDialog.value = false;
    newListName.value = "";
  }
};

const cancelCreateList = () => {
  showCreateListDialog.value = false;
  newListName.value = "";
};

// 编辑清单
const editList = (list) => {
  editListData.value = list;
  editListName.value = list.name;
  editListColor.value = list.color;
  showEditListDialog.value = true;
};

const confirmEditList = () => {
  if (editListName.value.trim() && editListData.value) {
    updateList(editListData.value.id, {
      name: editListName.value.trim(),
      color: editListColor.value,
    });
    showEditListDialog.value = false;
    editListData.value = null;
  }
};

const cancelEditList = () => {
  showEditListDialog.value = false;
  editListData.value = null;
};

// 删除清单
const deleteListConfirm = (list) => {
  deleteListData.value = list;
  showDeleteConfirmDialog.value = true;
};

const confirmDeleteList = () => {
  if (deleteListData.value) {
    deleteList(deleteListData.value.id);
    showDeleteConfirmDialog.value = false;
    deleteListData.value = null;
  }
};

const cancelDeleteList = () => {
  showDeleteConfirmDialog.value = false;
  deleteListData.value = null;
};

// 获取清单名称的首字符
const getListInitial = (name) => {
  if (!name) return '';
  const firstChar = name.charAt(0);
  // 如果是中文字符，直接返回
  if (/[\u4e00-\u9fa5]/.test(firstChar)) {
    return firstChar;
  }
  // 如果是英文字符，返回大写
  if (/[a-zA-Z]/.test(firstChar)) {
    return firstChar.toUpperCase();
  }
  // 其他字符（数字、符号等）直接返回
  return firstChar;
};

// 根据背景色计算合适的文字颜色
const getTextColor = (backgroundColor) => {
  if (!backgroundColor) return 'white';
  
  // 移除#号
  const hex = backgroundColor.replace('#', '');
  
  // 转换为RGB
  const r = parseInt(hex.substr(0, 2), 16);
  const g = parseInt(hex.substr(2, 2), 16);
  const b = parseInt(hex.substr(4, 2), 16);
  
  // 计算亮度 (使用相对亮度公式)
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  
  // 如果背景较亮，使用深色文字；如果背景较暗，使用浅色文字
  return brightness > 128 ? '#333333' : 'white';
};

const colorOptions = [
  "#6366f1",
  "#ef4444",
  "#f59e0b",
  "#10b981",
  "#8b5cf6",
  "#f97316",
  "#06b6d4",
  "#84cc16",
];
</script>

<style lang="less" scoped>
.navigation-menu {
  width: 240px;
  background-color: var(--background-color);
  border-right: 1px solid var(--border-color);
  padding: 16px 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.menu-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  padding: 0 16px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;

  &:hover {
    background-color: var(--surface-color);
  }

  &.active {
    background-color: var(--surface-color);
    color: var(--primary-color);

    .menu-icon {
      color: var(--primary-color);
    }
  }
}

.menu-icon {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;

  &.active-icon {
    color: var(--primary-color);
  }

  &.high-priority {
    color: #ef4444;
  }

  &.medium-priority {
    color: #f59e0b;
  }

  &.low-priority {
    color: #10b981;
  }
}

.list-avatar {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.list-initial {
  line-height: 1;
  user-select: none;
}

.menu-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--surface-color);
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.list-item {
  position: relative;

  &:hover .list-actions {
    opacity: 1;
    visibility: visible;
  }
}

.list-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  margin-left: 8px;

  .action-btn {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: var(--surface-color);
      color: var(--text-primary);
    }

    &.delete-btn:hover {
      background-color: #fef2f2;
      color: #dc2626;
    }
  }
}

.add-list-btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);

  &:hover {
    background-color: var(--surface-color);
  }

  .menu-icon {
    color: var(--text-primary);
  }

  .menu-text {
    color: var(--text-primary);
    font-weight: 600;
  }
}

// 对话框样式
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.menu-box {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow: auto;
}

.dialog {
  background: var(--background-color);
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .close-btn {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      color: var(--text-secondary);
      border-radius: 4px;
      transition: all 0.2s ease;

      &:hover {
        background-color: var(--surface-color);
        color: var(--text-primary);
      }
    }
  }

  .dialog-body {
    padding: 20px 24px;

    .form-group {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
      }

      input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.2s ease;

        &:focus {
          outline: none;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
      }
    }

    .color-options {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;

      .color-option {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s ease;

        &:hover {
          transform: scale(1.1);
        }

        &.active {
          border-color: var(--text-primary);
          box-shadow: 0 0 0 2px var(--background-color),
            0 0 0 4px var(--text-primary);
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-color);

    .btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;

      &.btn-secondary {
        background-color: var(--surface-color);
        color: var(--text-secondary);

        &:hover {
          background-color: var(--surface-color);
          color: var(--text-primary);
        }
      }

      &.btn-primary {
        background-color: var(--primary-color);
        color: white;

        &:hover:not(:disabled) {
          background-color: var(--primary-hover);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      &.btn-danger {
        background-color: #dc2626;
        color: white;

        &:hover {
          background-color: #b91c1c;
        }
      }
    }
  }

  .settings-item,
  .statistics-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 14px;

    &:hover {
      background-color: var(--surface-color);
      color: var(--text-primary);
    }

    .icon {
      margin-right: 8px;
      font-size: 16px;
    }
  }
}
</style>
